<template class="">
  <div>
    <div class="border-b border-dashed border-gray-300 dark:border-gray-700 my-2 mb-4"></div>
    <div class="flex text-gray-400 dark:text-gray-600 items-center justify-between">
      <div class="text-xs flex items-center">
        <span v-if="!props.isReply">P-</span>
        <span v-else>R-</span>
        <span class="mr-2">{{ props.data.code }} </span>
        <span class="mr-2 flex items-center">
          <el-icon class="mr-1"><i-ep-user-filled /></el-icon>
          <span>{{ props.data.anonymous ? '匿名' : props.data.user.name }}</span>
        </span>
        <span class="mr-2 flex items-center">
          <el-icon class="mr-1"><i-ep-location-filled /></el-icon>
          <span v-if="unknowLocation">未知领域</span>
          <span v-else>{{ location }} </span>
        </span>
      </div>
      <button v-if="props.data.status == 0" @click="handleOperate()">
        <el-icon><i-ep-more-filled /></el-icon>
      </button>
    </div>
    <p class="text-gray-600 dark:text-gray-400 py-4">
      {{ props.data.text }}
    </p>
    <div class="text-xs text-gray-400 dark:text-gray-600 flex items-center justify-between">
      <span class="flex items-center">
        <el-icon><i-ep-clock /></el-icon>
        <span class="ml-1">{{ props.data.created }}</span>
      </span>
      <button v-if="props.data.status == 1 && !props.isReply" @click="handleReply()">
        <span class="flex items-center">
          <el-icon><i-ep-comment /></el-icon>
          <span class="mx-1">回复</span>
        </span>
      </button>
    </div>
    <div
      class="pl-4 border-l-4 border-gray-200 dark:border-gray-500"
      v-if="props.data.replies && props.data.replies.length > 0"
    >
      <Item v-for="itemData in props.data.replies" :data="itemData" :isReply="true" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  index: {
    required: false,
    type: Number,
    default: -1
  },
  data: {
    required: true,
    type: Object
  },
  isReply: {
    type: Boolean,
    default: false,
    required: false
  }
})

const emits = defineEmits(['reply', 'operate'])

const handleReply = () => {
  if (props.index > -1) {
    emits('reply', props.index)
  } else {
    console.error('invalid data index for reply')
  }
}

const handleOperate = () => {
  if (props.index > -1) {
    emits('operate', props.index)
  } else {
    console.error('invalid data index for operate')
  }
}

const location = computed(() =>
  // ${props.data.location[0]}
  props.data.location ? `${props.data.location[1]}${props.data.location[2]}` : ''
)

const unknowLocation = computed(
  () => !props.data.location || props.data.location[1] == null || props.data.location[2] == null
)
</script>
